<template>
  <div class="medical-manage">
    <el-card class="login-form">
      <template #header>
        <div class="card-header">
          <span>慢病信息管理</span>
          <div>
            <el-button type="primary" @click="handleAdd">添加慢病</el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="疾病编码">
          <el-input v-model="searchForm.code" placeholder="请输入疾病编码" clearable />
        </el-form-item>
        <el-form-item label="拼音码">
          <el-input v-model="searchForm.pinyin" placeholder="请输入拼音码" clearable />
        </el-form-item>
        <el-form-item label="疾病名称">
          <el-input v-model="searchForm.name" placeholder="请输入疾病名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 慢病信息表格 -->
      <el-table
          :data="medicalList"
          border
          style="width: 100%"
          @row-click="handleRowClick"
          highlight-current-row
          stripe>
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="diseaseCode" label="疾病编码" width="150" />
        <el-table-column prop="pinyinCode" label="拼音码" width="150" />
        <el-table-column prop="diseaseName" label="疾病名称" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <el-pagination
          style="margin-top: 20px; text-align: right"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="20"
          @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 添加/编辑慢病对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="`${isEdit ? '编辑' : '添加'}慢病信息`"
        width="40%">
      <el-form :model="currentMedical" label-width="120px">
        <el-form-item label="疾病编码" prop="diseaseCode">
          <el-input v-model="currentMedical.diseaseCode" />
        </el-form-item>
        <el-form-item label="拼音码" prop="pinyinCode">
          <el-input v-model="currentMedical.pinyinCode" />
        </el-form-item>
        <el-form-item label="疾病名称" prop="diseaseName">
          <el-input v-model="currentMedical.diseaseName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitMedical"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from 'axios';

const medicalList = ref([]);
const dialogVisible = ref(false);
const isEdit = ref(false);
const currentMedical = ref({
  id: 0,
  diseaseCode: "",
  pinyinCode: "",
  diseaseName: "",
});

// 搜索表单
const searchForm = ref({
  code: "",
  pinyin: "",
  name: "",
});

// 分页控制
const currentPage = ref(1);
const total = ref(0);

// 加载慢病信息列表（带模糊查询）
const loadMedicalList = async () => {
  const res = await axios.get('/disease/list', {
    params: {
      code: searchForm.value.code,
      pinyin: searchForm.value.pinyin,
      name: searchForm.value.name
    }
  });
  if (res.data.code === 200) {
    medicalList.value = res.data.data;
    total.value = res.data.data.length;
  }
};

// 处理添加
const handleAdd = () => {
  isEdit.value = false;
  currentMedical.value = {
    id: 0,
    diseaseCode: "",
    pinyinCode: "",
    diseaseName: "",
  };
  dialogVisible.value = true;
};

// 处理编辑
const handleEdit = (row) => {
  isEdit.value = true;
  currentMedical.value = { ...row };
  dialogVisible.value = true;
};

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除该慢病 "${row.diseaseName}" 吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await axios.delete(`/disease/delete/${row.id}`);
    if (res.data.code === 200) {
      ElMessage.success("删除成功");
      loadMedicalList();
    } else {
      ElMessage.error(res.data.message || "删除失败");
    }
  }).catch(() => {
    ElMessage.info("已取消删除");
  });
};

// 提交慢病信息
const submitMedical = async () => {
  if (!currentMedical.value.diseaseCode || !currentMedical.value.diseaseName) {
    ElMessage.error("请填写完整信息");
    return;
  }
  let res;
  if (isEdit.value) {
    res = await axios.put('/disease/update', currentMedical.value);
  } else {
    res = await axios.post('/disease/add', currentMedical.value);
  }
  if (res.data.code === 200) {
    ElMessage.success(isEdit.value ? "更新成功" : "添加成功");
    dialogVisible.value = false;
    loadMedicalList();
  } else {
    ElMessage.error(res.data.message || "操作失败");
  }
};

// 搜索慢病信息
const handleSearch = () => {
  loadMedicalList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    code: "",
    pinyin: "",
    name: "",
  };
  loadMedicalList();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

onMounted(() => {
  loadMedicalList();
});
</script>

<style scoped>
.medical-manage {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f5f7fa;
  cursor: pointer;
}
</style>
